<template>
  <div class="query-wrapper">
    <van-field v-model="form.fieldValue" is-link readonly placeholder="选择日期" @click="showPicker = true" />
    <van-field v-model="form.type" is-link readonly placeholder="选择类型" @click="showPicker = true" />
    <van-field v-model="form.type" is-link readonly placeholder="选择类型" @click="showPicker = true" />
    <van-field v-model="form.type" is-link readonly placeholder="选择类型" @click="showPicker = true" />
    <!-- <van-popup v-model:show="showPicker" round position="bottom">
      <van-date-picker
        title="选择日期"
        @cancel="showPicker = false"
        @confirm="onConfirm"
        :columns-type="['year', 'month']"
      />
    </van-popup> -->
    <van-popup v-model:show="showPicker" round position="bottom">
      <van-picker title="标题" :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
    </van-popup>
  </div>
</template>

<script setup>
let form = ref({
  fieldValue: "",
  type: "",
});
let showPicker = ref(false);
let columns = [
  { text: "当月达成率", value: "0" },
  { text: "宽一达成率", value: "1" },
  { text: "宽末达成率", value: "2" },
];

const onConfirm = (param) => {
  console.log(param);
  form.value.fieldValue = param.selectedValues.join("-");
  showPicker.value = false;
};
</script>

<style lang="scss" scoped>
.query-wrapper {
  display: flex;
}
</style>
